<template>
  <view>
    <view v-show="isHide">
      <view
        class="sunui-grand-hide-bg"
        :style="'background-color:' + bg + ';'"
        :class="isBt ? 'isbottomyes' : 'isbottomno'"
      >
        <text
          class="sunui-grand-summary numbersty"
          :style="'-webkit-line-clamp:' + clamp + ';'"
        >
          {{ content }}
        </text>
        <view
          class="sunui-grand-show-btn"
          v-show="isHidebt"
          :style="'background-color:' + btbg + ';'"
        >
          <view @tap="show" class="text-left" style="width:140rpx;height: 34rpx;">
            <text>...</text>
            <text :style="{ color: color }">{{ expandText }}</text>
          </view>
        </view>
      </view>
    </view>
    <view v-show="!isHide">
      <view
        class="sunui-grand-show-bg numbersty"
        :style="'background-color:' + bg + ';'"
        :class="isBt ? 'isbottomyes' : 'isbottomno'"
      >
        <text>
          {{ content }}
        </text>
        <view
          class="sunui-grand-hide-btn"
          v-show="isHidebt"
          :style="'background-color:' + btbg + ';'"
        >
          <view @tap="hide" class="text-left">
            <text :style="{ color: color }">{{ shinkText }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
var _self;
export default {
  data() {
    return {
      isHide: true,
      isHidebt: true,
      isBt: true,
    };
  },
  props: {
    clamp: {
      type: [Number, String],
      default: 4,
    },
    color: {
      type: String,
      default: `#1E9FFF`,
    },
    content: {
      type: [String, Object],
      default: ``,
    },
    bg: {
      type: String,
      default: ``,
    },
    expandText: {
      type: String,
      default: "查看更多",
    },
    shinkText: {
      type: String,
      default: "收起",
    },
    btbg: {
      type: String,
      default: "#FFFFFF",
    },
  },
  watch: {
    content: {
      handler(n, o) {
        if (n.length < 110) {
          let _this = this;
          _this.isHidebt = false;
          _this.isBt = false;
        }
      },
      deep: true,
    },
  },
  created() {
    _self = this;
  },
  methods: {
    show() {
      let _this = this;
      _this.isHide = false;
    },
    hide() {
      let _this = this;
      _this.isHide = true;
    },
  },
  mounted: function() {
    // if (this.content.length < 110) {
    //   let _this = this;
    //   _this.isHidebt = false;
    //   _this.isBt = false;
    // }
  },
};
</script>

<style>
.sunui-grand-hide-bg {
  position: relative;
}
.sunui-grand-summary {
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
}

.sunui-grand-show-btn {
  /* width: 3rem; */
  width: 130upx;
  position: absolute;
  bottom: 15upx;
  right: 5upx;
}

.sunui-grand-hide-btn {
  width: 80upx;
  position: absolute;
  bottom: -20upx;
  right: 5upx;
}
.numbersty {
  word-break: break-all;
  /*防止数字字母溢出*/
  text-align: justify;
  /*防止文字参差不齐*/
  padding: 0.2rem;
  font-size: 28upx;
  line-height: 52upx;
  font-weight: 400;
  color: rgba(79, 79, 79, 1);
  letter-spacing: 1px;
  position: relative;
}
.isbottomyes {
  margin-bottom: -1rem;
}
</style>
